import React, { Component } from "react";
import { connect } from "react-redux";
import './ModuleList.scss'

class moduleList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      moduleListArray: [],
    };
  }
  componentDidMount(){
    let moduleListArray=Array.from(this.props.data.data.kingKongModule.kingKongList)
    this.setState({
      moduleListArray
    });
  }

  render() {
    return (
      <div>
        <ul className="moduleListHead">
          <li>
            <span className="iconfont icon-airudiantubiaohuizhi-zhuanqu_yiwutong"></span>
            <i>网易自营品牌</i>
          </li>
          <li>
            <span className="iconfont icon-65"></span>
            <i>30天无忧退货</i>
          </li>
          <li>
            <span className="iconfont icon-jiaoyi"></span>
            <i>48小时快速退货</i>
          </li>
        </ul>
        <section className="moduleListConent">
          {this.state.moduleListArray.map((v, i) => (
            <a key={i} href={v.href}>
              <img src={v.picUrl} alt=""></img>
              <p>{v.text}</p>
            </a>
          ))}
        </section>
        <section className='advertisement'>
        <a href="#/GoodPro">
          <img src="/img/WYWjjqrCaOWX.gif" alt=""/>
        </a>
        <a href="#/GoodPro">
          <img src="/img/HPjRtO6wcQGS.png" alt=""/>
        </a>
        <a href="#/GoodPro">
          <img src="/img/o5UN6liEBTKO.png" alt=""/>
        </a>
        </section>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {};
};

const MapDispatchToProps = (disoatch) => {
  return {};
};

export default connect(mapStateToProps, MapDispatchToProps)(moduleList);
